<!--面包屑-->
<script lang="ts" setup>
import useThemeStore from '@/store/theme.ts'
import useRouteStore from '@/store/route.ts'
import {storeToRefs} from 'pinia'
import {computed} from 'vue'
import {useRoute, useRouter} from 'vue-router'

const themeStore = useThemeStore()
const routeStore = useRouteStore()
const route = useRoute()
const router = useRouter()
const {breadcrumbIcon} = storeToRefs(themeStore)
const breadcrumbList = computed(() => routeStore.breadcrumbListGet[route.matched[route.matched.length - 1].path])

const onBreadcrumbClick = (item: any, index: number) => {
	if (item.menuType !== 'M') return
	if (index !== breadcrumbList.value.length - 1) void router.push({path: item.path})
}
</script>

<template>
	<div :class="['breadcrumb-box', !breadcrumbIcon && 'no-icon']">
		<el-breadcrumb separator-icon="ArrowRight">
			<template v-if="breadcrumbList">
				<el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="item.path">
					<div class="el-breadcrumb__inner is-link" @click="onBreadcrumbClick(item, index)">
						<base-icon v-if="item.meta.icon && breadcrumbIcon" :icon="item.meta.icon" class="breadcrumb-icon"/>
						<span class="breadcrumb-title">{{ item.meta.title }}</span>
					</div>
				</el-breadcrumb-item>
			</template>
		</el-breadcrumb>
	</div>
</template>

<style lang="scss" scoped>
.breadcrumb-box {
	display: flex;
	align-items: center;
	padding-right: 50px;
	overflow: hidden;
	mask-image: linear-gradient(90deg, #000000 0%, #000000 calc(100% - 50px), transparent);

	.el-breadcrumb {
		white-space: nowrap;

		.el-breadcrumb__item {
			position: relative;
			display: inline-block;
			float: none;

			.el-breadcrumb__inner {
				display: inline-flex;

				.breadcrumb-icon {
					margin-top: 2px;
					margin-right: 6px;
					font-size: 16px;
				}

				.breadcrumb-title {
					margin-top: 3px;
				}
			}

			:deep(.el-breadcrumb__separator) {
				position: relative;
				top: -1px;
			}
		}
	}
}

.no-icon {
	.el-breadcrumb {
		.el-breadcrumb__item {
			top: -2px;

			:deep(.el-breadcrumb__separator) {
				top: 2px;
			}
		}
	}
}
</style>
